<extend name="Base/mob_common"/>
<block name="mob_header">
    <div class="header">
        <div class="am-g">
            <h1>{:modC('WEB_SITE_NAME','OpenSNS')}</h1>

            <p>{:modC('SUMMARY','')}</p>
        </div>
        <hr/>
    </div>
</block>
<block name="mob_body">
    <div class="am-g">
        <div class="am-u-lg-6 am-u-md-8 am-u-sm-centered">
            <!--测试-->
            <div class="am-tabs" data-am-tabs>
                <ul class="am-tabs-nav am-nav am-nav-tabs">
                    <li class="am-active"><a >邮箱找回</a></li>
                    <li><a >手机找回</a></li>
                </ul>

                <form id="foundpassword" method="post" class="am-form" data-url="{:U('Mob/Member/foundpassword')}">
                <div class="am-tabs-bd">
                    <div class="am-tab-panel am-fade am-in am-active" >
                            <input class="am-radius" placeholder="邮箱地址" type="email" name="email" id="email"
                                   value="">
                            <br>

                        <div>
                            <!--验证码-->
                            <div class="control-group login-input">
                                <div class="controls">
                                    <input type="text" id="inputPassword" class="form-control" placeholder="请输入验证码"
                                           errormsg="请填写5位验证码" nullmsg="请填写验证码" datatype="*5-5" name="verify">
                                </div>
                            </div>
                            <div class="control-group login-input">
                                <div class="controls" style="margin-top: 20px;">
                                    <img class="verifyimg reloadverify" alt="点击切换" src="{:U('verify')}"
                                         style="cursor:pointer;">
                                </div>
                                <div class="controls Validform_checktip text-warning"></div>
                            </div>
                            <!--验证码结束-->
                        </div>
                        <br>

                    </div>

                    <div class="am-tab-panel am-fade tab-pane" >
                            <input class="am-radius" placeholder="输入输入手机号" type="text" name="mobile"  id="mobile"
                                   value="">
                            <br>
                        <!--手机验证码-->
                        <div class="form-group " style="height: 50px">
                            <input type="hidden" name="reg_type" value="mobile">
                            <input type="text" class="form-control pull-left" placeholder="验证码"  name="reg_verify"
                                   style="width: 100px;float: left">

                            <a class="btn btn-default " data-role="getVerify" style="margin: 10px;line-height: 40px">点击获取验证码</a>

                            <div class="clearfix"></div>
                        </div>
                        <!--手机验证END-->
                    </div>

                    <div class="form-group" style="padding: 10px">


                    <div class="am-cf">
                        <input type="button" id="confirm" value="{:L('_OK_')}"
                               class="am-btn am-radius am-btn-primary am-btn-sm am-fl am-btn-block">
                    </div>
                    <br>
</div>
                </div>
                </form>
            </div>


        </div>
    </div>
    <script type="text/javascript">

        $('#confirm').click(function () {
            var data = $("#foundpassword").serialize();
            var url = $("#foundpassword").attr('data-url');
            $.post(url, data, function (msg) {
                if (msg.status == 1) {
                    toast.success(msg.info);
                    setTimeout(function () {
                        window.location.href = "{:U('Mob/Member/index')}";
                    }, 5000);
                } else {
                    toast.error(msg.info);
                }
            }, 'json');
        });

        $(function () {
            $("[data-role='getVerify']").click(function () {
                var account = $('[name="mobile"]').val();

                var type = $(this).parents('.tab-pane').find('[name="reg_type"]').val();

                $.post("{:U('Mob/verify/sendVerify')}", {
                    account: account,
                    type: type,
                    action: 'member'
                }, function (res) {
                    if (res.status) {
                        toast.success(res.info);
                    }
                    else {
                        toast.error(res.info);
                    }
                })
            })
            $('#reg_nav li a').click(function () {
                $('.tab-pane').find('input').attr('disabled', true);
                $('.tab-pane').eq($("#reg_nav li a").index(this)).find('input').attr('disabled', false);
            })
            $("[type='submit']").click(function () {
                $(this).parents('form').submit();
            })

            $('[href="#{$type}_reg"]').click()


        })


        var verifyimg = $(".verifyimg").attr("src");
        $(".reloadverify").click(function () {
            if (verifyimg.indexOf('?') > 0) {
                $(".verifyimg").attr("src", verifyimg + '&random=' + Math.random());
            } else {
                $(".verifyimg").attr("src", verifyimg.replace(/\?.*$/, '') + '?' + Math.random());
            }
        });

    </script>
</block>
